<template>
 <div class="classify">
  <div class="top">
  	<!-- 头部 -->
   <div class="classify-heard bg-white d-flex jc-between ai-center">
   	<!-- 左侧返回 -->
   	 <div> 
   	 	<el-button type="text" @click="$router.go(-1)">
   	 		<div class="iconfont icon-back px-3 fs-xxxl text-dark"></div>
   	 	</el-button>
   	 </div>
   	 <!-- 中间搜索框 -->
   	 <div class="pl-3">
   	 	<div class="fs-xxl py-3 pl-3 ml-3">
   	 		{{title}}
   	 	</div>
   	 </div>
   	 <!-- 搜索按钮 -->
   	 <div>
   	 	<el-button class="pr-2 text-dark fs-xxl" type="text" @click="onlink">在线客服</el-button>
   	 </div>
   </div>
	<!-- 分类条 -->
	<div class="px-2 bg-white py-3" style="touch-action: none;">
		<mt-navbar v-model="selected">
			<mt-tab-item id="0">
				<a class="nav-link" @click="getOrderList">全部</a>
			</mt-tab-item>
			<mt-tab-item id="1">
				<a class="nav-link" @click="getOrderByStatus(1)">待付款</a>
			</mt-tab-item>
			<mt-tab-item id="2">
				<a class="nav-link" @click="getOrderByStatus(2)">待发货</a>
			</mt-tab-item>
			<mt-tab-item id="3">
				<a class="nav-link" @click="getOrderByStatus(3)">待收货</a>
			</mt-tab-item>
			<mt-tab-item id="4">
				<a class="nav-link" @click="getOrderByStatus(4)">待评价</a>
			</mt-tab-item>
        </mt-navbar>
	</div>
  </div>
 	
	<!-- 产品列表-->
	<div class="classify_contain">
		<div v-for="(item,i) in orderList" :key="i"  class="bg-white classify_contain_item px-3 py-3 my-3">
			<router-link tag="div" :to="'/order/orderInfo/'+item.order.id">
			<div class="d-flex jc-between py-2 mb-2">
				<div class="">天院旗舰店</div>
				<div>
					<div class="text-pink" v-if="item.type == 1">待付款</div>
					<div class="text-pink" v-if="item.type == 2">待发货</div>
					<div class="text-pink" v-if="item.type == 3">待收货</div>
					<div class="text-pink" v-if="item.type == 4">待评价</div>
				</div>
			</div>
			<div class="d-flex" v-for="(item2,i2) in item.orderItemList" :key="i2">
				<!-- 左侧图片 -->
			<div class="img">
				<van-image
				style="width: 100px; height: 100px"
				:src="item2.image"
				fit="cover">
			</van-image>
			</div>
			<!-- 右侧文字 -->
			<div class="px-1 py-2 flex-1 px-2">
				<div class="fs-xl text-dark">{{item2.name}}</div>
				<div class="py-2 text-grey">{{item2.num}}</div>
				<div class="d-flex jc-between pt-3 mt-3"><div class="fs-xl text-dark pr-3">￥{{item2.price/100}}</div> <div class="text-grey">×1</div></div>
			</div>
			</div>
			<div class="d-flex jc-between pt-3">
				
				<div class="">共{{item.order.totalNum}}件商品(感谢您的支持！)</div>
				<div class="d-flex"><div>实付款:</div><div class="text-pink fs-xxl">￥{{item.order.totalNum}}</div></div>
			</div>
			
		</router-link>
		<div class="d-flex jc-between pt-3">
			<el-button v-if="selected == '1'" size="mini" type="" @click="cancel(item.order.id,item.order.orderStatus)">取消订单</el-button>
			<el-button v-if="selected == '1'" size="mini" type="danger" @click="pay(item.order.id)">支付备货金</el-button>
			
			<el-button v-if="selected > '2'" size="mini" type="" @click="$router.pusu('/order/logistics/'+item.order.id)">订单跟踪</el-button>
			<el-button v-if="selected == '3'" size="mini" type="danger" @click="">再次购买</el-button>
		</div>
		
		</div>
		
	</div>
	<div v-if="orderList.length<1?true:false" class="bg-white text-c" style="height: 250px;">
		<div class="none">
			<div class="iconfont">
				<svg class="icon order" aria-hidden="true">
					<use xlink:href="#icon-shouhuo"></use>
				</svg>
			</div>
			<div class="text-grey">您还没有相关订单~</div>
		</div>
		
	</div>
	<!-- 推荐 -->
	<userLike v-if="orderList== undefined || orderList== null || orderList.length == 0" :title="'为你推荐'" />
 </div>
	
</template>

<script>
import { Navbar, TabItem, TabContainer, TabContainerItem ,Toast} from "mint-ui";
import userLike from "../../components/home/userLike";
	export default {
		data(){
			return {
				selected: "0",
				title: "全部订单",
              
              swiperOption: {
              	slidesPerView: 5,
              },
              
              active: 0,
              // 订单列表
              orderList: [],
			}
		},
		watch: {
			selected(n) {
				switch (n) {
					case "1":
					this.title = "待支付订单";
					break;
					case "2":
					this.title = "待发货订单";
					break;
					case "3":
					this.title = "待收货订单";
					break;
					case "4":
					this.title = "待评价订单";
					break;
					default:
					this.title = "全部订单";
				}
			}
		},
		methods: {
          getIndex(i){
          	this.active = i
          },
          onlink(){
          	this.$router.push('/botUi')
          },
          async getOrderList(){
          	   this.$store.commit('showLoading')
          	   if (this.$route.params.type) {
          	   	const res = await this.$http.get(`order/findOrderByStatus.do?status=${this.selected}`)
          	   	if (res.data.code != 0) {
          	   		this.$store.commit('hideLoading')
          	   		this.orderList = res.data.reverse();
          	   	}else {
          	   		this.$store.commit('hideLoading')
          	   	}
          	   	if (res.data.message === '订单不存在') {
          	   		this.$store.commit('hideLoading')
          	   	}
          	   	
          	   }else {
          	   	const res = await this.$http.get(`order/findOrderByStatus.do?`)
          	   	if (res.data.code != 0) {
          	   		this.$store.commit('hideLoading')
					
          	   		this.orderList = res.data.reverse();
          	   	}
          	   	if (res.data.message === '订单不存在') {
          	   		this.$store.commit('hideLoading')
          	   	}
          	   }
          	   
               
          },
          async getOrderByStatus(status){
          	this.$store.commit('showLoading')
             const res = await this.$http.get(`order/findOrderByStatus.do?status=${status}`)
             if (res.data.code != 0) {
             	this.$store.commit('hideLoading')
             	this.orderList = res.data.reverse();
             }else {
             	this.orderList = [];
             	this.$store.commit('hideLoading')
             	Toast('你还没用相关订单')
             }
          },
          async cancel(id,status){
          	 const res = await this.$http.get(`order/deleteOrderById.do?id=${id}`)
				if (res.data.code != 0) {
					this.getOrderByStatus(status)
					Toast('订单已取消')

				}else {
					Toast('网络异常！')
				}
          },
          pay(id){
          	this.$router.push('/orderPay/'+id)
          }
		},
		created() {
			
			let type = this.$route.params.type;
			if (type) {
				this.selected = type;
			}
			this.getOrderList();
		},
		
           
		
		mounted() {   //在页面创建之前设置body的背景色
			console.log(this.orderList)
			document.querySelector('body').setAttribute('style', 'background:#f1f3f4')
		}, 
        beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        	document.querySelector('body').removeAttribute('style')
        },
        components: {
        	userLike,

        },
	}
</script>

<style scoped lang="scss">
.none {
   padding-top: 50px;
}
.classify_contain_item {
	border-bottom: 1px solid #eeeeee;
	color: #999;
}
.classify_contain {
	
}
.classify {
	padding-bottom: 60px;
}
.top {
	position: sticky;
	top: 0;
	z-index: 999;
}
.active {
	color: #e32639;

}
a {
	font-size: 14px;

}
.order {
	font-size: 8rem;
}
</style>